<template>
  <view
    class="headerView"
    :style="{ height: screenWidth <= 768 ? '80rpx' : '80px' }"
  >
    <MobileView
      v-if="screenWidth <= 768"
      :meunList="meunList"
      :routePath="routePath"
    />
    <PCView :meunList="meunList" :routePath="routePath" v-else />
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import PCView from "./pc.vue";
import MobileView from "./mobile.vue";
const screenWidth = ref(0); // 屏幕宽度

const pages = getCurrentPages(); // 获取当前页面栈
const currentPage = pages[pages.length - 1]; // 获取当前页面实例（栈中的最后一个元素）
const routePath = ref(currentPage.route);
// 菜单列表
const meunList = ref([
  { path: "pages/home/index", name: "Home" },
  { path: "pages/products/index", name: "Products" },
  { path: "pages/aboutUs/index", name: "About Us" },
  { path: "pages/contactUs/index", name: "Contact Us" },
]);

onMounted(() => {
  screenWidth.value =
    document?.body?.offsetWidth ?? uni.getSystemInfoSync().screenWidth;
  window.addEventListener("resize", () => {
    screenWidth.value =
      document?.body?.offsetWidth ?? uni.getSystemInfoSync().screenWidth;
  });
});

onUnmounted(() => {
  window.removeEventListener("resize");
});
</script>
<style scoped lang="scss"></style>
